<%@ page pageEncoding="UTF-8" contentType="text/html; charset=UTF-8"%>
<%@ taglib uri="http://tiles.apache.org/tags-tiles" prefix="t"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%@ taglib prefix="tags" tagdir="/WEB-INF/tags"%>
<%@ taglib prefix="s" uri="http://www.springframework.org/tags"%>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form"%>

<html>
<head>
<style>
.table_add_url{width:90%;margin:30px;padding:30px;background:#fff;border:1px solid;}
.table_add_url tr th{border:1px solid;font:bold;}
.table_add_url tr td{border:1px solid; padding:0px 3px 0px 0px; background:red;}
.table_add_url tr td input{width:100%; }
.table_add_url tr td select{width:100%;}
/* .table_add_url tr td input{width:97%; margin:0px 2px 0px 2px;} */
/* .table_add_url tr td select{width:97%;margin:0px 2px 0px 2px;} */

.table_add_url .table_name{width:10%;}
.table_add_url .table_attr{width:10%;}
.table_add_url .table_url{}
.table_add_url .table_action{width:20%;}


</style>

<script type="text/javascript">

function logs(s){
	if(typeof console == 'object'){
		console.log(s);
	}
}

$(document).ready(function() {
	logs("is come???");
	$(':button').unbind('click', register);
	$(':button').bind('click', register);

	$('#attr1').change(changeAttr2);

});


function register(){
	var tr = $(this).parent().parent();
	
	var param ='';
	$.each($(tr).children(), function(){
		var id = $(this).children().attr('id');
		var val = $(this).children().val();
		if(param.length==0){
			param=id+'='+val;	
		}else{
			param+='&'+id+'='+val;
		}
	});
	logs(param);
	
	$.ajax({
        url:'register.json',
        type:'post',
        data:param,
        dataType:'json',
        error:function(){
              alert('Error');
        },
        success:function(data){
              logs(JSON.stringify(data));
        }
	 });
}

logs('ewf');

function changeAttr2(index){
	var selected='';
	logs(typeof index);
	if(typeof index == 'number'){
		selected=3;
	}else{
		selected= $(this).val();
		
	}
	 
	logs('selected = '+selected);
	var innerHtml = '<option>-</option>';
	$.each(attr['second'+selected], function (index){
		
		logs(this);
		for (var property in this) {
		    if (this.hasOwnProperty(property)) {
		        logs(this[property]);
		        innerHtml += '<option value = "'+property+'">'+this[property]+'</option>';        
		        break;
		    }
		}
		
		
	});
	
	selectRemoveAndAppend($('#attr2'), innerHtml);	
	
}


function selectRemoveAndAppend(obj, append){
	try{
		$(obj)
	    .find('option')
	    .remove()
	    .end()
	    .append(append);	
	}catch(e){logs(e)}
}


	
// 	logs(attr);
// 	logs(attr[1]);
// 	logs(attr['second1'][0]);
	
// $('#attr1').bind('onchange', changeAttr2);

</script>


</head>
<body>
	<div>
		<table class="table_add_url">
			<thead>
				<tr>
					<th>회사이름</th><th>분류</th><th>url</th><th>동작</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td class="table_name"><input type="text" id=""/></td><td class="table_attr"><select><option value="1">연예</option></select></td><td class="table_url"><input type="text" id=""/></td><td class="table_action"><input type="button" id="regist" value="등록" onclick=""/></td>
				</tr>
				<tr>
					<td class="table_name"><input type="text" id=""/></td><td class="table_attr"><select><option value="1">연예</option></select></td><td class="table_url"><input type="text" id=""/></td><td class="table_action"><input type="button" id="regist" value="등록" onclick=""/></td>
				</tr>			
			</tbody>
		</table>		
	
	
	</div>
	
	
	<div>
		<table>
			<thead>
				<tr>
					<th>이름</th>
					<th>마지막 Update 시간</th>
					<th>국가</th>
					<th>분류1</th>
					<th>분류2</th>
					<th>URL</th>
					<th>동작</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td><input type="text" id="name" /></td>
					<td><input type="text" id="last_dt" readonly /></td>
					<td><select id="nation">
							<c:forEach var="item" items="${locale}">
								<option value="<c:out value="${item.loc}" />">
									<c:out value="${item.name}" />
								</option>
							</c:forEach>
					</select></td>
					<td><select id="attr1">
							
							<c:forEach var="item" items="${attrs}">
								<option value="<c:out value="${item.firstId}" />">
									<c:out value="${item.firstName}" />
								</option>
							</c:forEach>
					</select></td>
					<td><select id="attr2">
							<option>-</option>
					</select></td>
					<td><input type="text" id="url" /></td>
					<td><input type="button" id="regist" value="등록" onclick=""/></td>
				</tr>
			</tbody>
		</table>

	</div>
<script type="text/javascript">

var attr = {};
attr = {
		<c:forEach var="item" items="${attrs}" varStatus="loop">
		'<c:out value="${item.firstId}"/>' :'<c:out value="${item.firstName}"/>' ,
			'second<c:out value="${item.firstId}"/>':[
			<c:forEach var="sss" items="${item.seconds}" varStatus="loop2" >
			{'<c:out value="${sss.secondId}"/>' : '<c:out value="${sss.secondName}"/>'}
			<c:if test="${!loop2.last}"> , </c:if>
			
		</c:forEach>
		]
		<c:if test="${!loop.last}"> , </c:if>
		</c:forEach>			
}


</script>
</body>
</html>


